<template>
  <ion-page>
    <ion-header :translucent="true">
      <ion-toolbar>
        <ion-title>发现</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content :fullscreen="true">
      <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title size="large">发现</ion-title>
        </ion-toolbar>
      </ion-header>

      <!-- 搜索栏 -->
      <div class="search-section">
        <ion-searchbar 
          v-model="searchText"
          placeholder="搜索房源、地区..."
          @ionInput="handleSearch"
          show-clear-button="focus"
        ></ion-searchbar>
      </div>

      <!-- 快捷筛选 -->
      <div class="filter-section">
        <ion-chip 
          v-for="filter in quickFilters" 
          :key="filter.id"
          :color="filter.active ? 'primary' : 'medium'"
          @click="toggleFilter(filter)"
        >
          <ion-label>{{ filter.name }}</ion-label>
        </ion-chip>
      </div>

      <!-- 房源列表 -->
      <div class="properties-section">
        <div class="section-header">
          <h3>推荐房源</h3>
          <ion-button fill="clear" size="small" color="primary">
            查看全部
          </ion-button>
        </div>

        <div class="properties-list">
          <ion-card 
            v-for="property in filteredProperties" 
            :key="property.id" 
            class="property-card"
            @click="viewPropertyDetail(property)"
          >
            <div class="property-image">
              <ion-icon :icon="homeOutline" size="large"></ion-icon>
            </div>
            <ion-card-content>
              <div class="property-info">
                <h4>{{ property.title }}</h4>
                <p class="address">{{ property.address }}</p>
                <div class="property-details">
                  <span class="rooms">{{ property.rooms }}室{{ property.bathrooms }}卫</span>
                  <span class="area">{{ property.area }}㎡</span>
                </div>
                <div class="property-footer">
                  <div class="price">¥{{ property.price }}/月</div>
                  <ion-chip :color="property.status === 'available' ? 'success' : 'medium'" size="small">
                    {{ property.status === 'available' ? '可租' : '已租' }}
                  </ion-chip>
                </div>
              </div>
            </ion-card-content>
          </ion-card>
        </div>

        <!-- 空状态 -->
        <div class="empty-state" v-if="filteredProperties.length === 0">
          <ion-icon :icon="searchOutline" size="large" color="medium"></ion-icon>
          <p>暂无符合条件的房源</p>
          <ion-button @click="clearFilters" fill="outline">
            清除筛选条件
          </ion-button>
        </div>
      </div>
    </ion-content>
  </ion-page>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import {
  IonPage,
  IonHeader,
  IonToolbar,
  IonTitle,
  IonContent,
  IonSearchbar,
  IonChip,
  IonLabel,
  IonCard,
  IonCardContent,
  IonButton,
  IonIcon,
  toastController
} from '@ionic/vue'
import {
  homeOutline,
  searchOutline
} from 'ionicons/icons'
import { usePropertyStore, type Property } from '@/stores/property'

const router = useRouter()
const propertyStore = usePropertyStore()

// 搜索文本
const searchText = ref('')

// 快捷筛选选项
interface QuickFilter {
  id: string
  name: string
  active: boolean
  type: 'type' | 'price' | 'area'
  value: any
}

const quickFilters = ref<QuickFilter[]>([
  { id: '1', name: '整租', active: false, type: 'type', value: 'apartment' },
  { id: '2', name: '合租', active: false, type: 'type', value: 'shared' },
  { id: '3', name: '1000以下', active: false, type: 'price', value: { max: 1000 } },
  { id: '4', name: '1000-2000', active: false, type: 'price', value: { min: 1000, max: 2000 } },
  { id: '5', name: '2000以上', active: false, type: 'price', value: { min: 2000 } },
  { id: '6', name: '50㎡以下', active: false, type: 'area', value: { max: 50 } },
  { id: '7', name: '50-100㎡', active: false, type: 'area', value: { min: 50, max: 100 } },
  { id: '8', name: '100㎡以上', active: false, type: 'area', value: { min: 100 } }
])

// 获取所有可用房源
const availableProperties = computed(() => {
  return propertyStore.getAvailableProperties()
})

// 筛选后的房源
const filteredProperties = computed(() => {
  let properties = availableProperties.value

  // 文本搜索
  if (searchText.value.trim()) {
    const searchLower = searchText.value.toLowerCase()
    properties = properties.filter(property => 
      property.title.toLowerCase().includes(searchLower) ||
      property.address.toLowerCase().includes(searchLower)
    )
  }

  // 快捷筛选
  const activeFilters = quickFilters.value.filter(f => f.active)
  
  activeFilters.forEach(filter => {
    switch (filter.type) {
      case 'type':
        properties = properties.filter(p => p.type === filter.value)
        break
      case 'price':
        properties = properties.filter(p => {
          if (filter.value.min && p.price < filter.value.min) return false
          if (filter.value.max && p.price > filter.value.max) return false
          return true
        })
        break
      case 'area':
        properties = properties.filter(p => {
          if (filter.value.min && p.area < filter.value.min) return false
          if (filter.value.max && p.area > filter.value.max) return false
          return true
        })
        break
    }
  })

  return properties
})

// 处理搜索
const handleSearch = (event: any) => {
  searchText.value = event.target.value
}

// 切换筛选条件
const toggleFilter = (filter: QuickFilter) => {
  filter.active = !filter.active
  
  // 如果是价格或面积筛选，取消同类型的其他筛选
  if (filter.type === 'price' || filter.type === 'area') {
    quickFilters.value.forEach(f => {
      if (f.type === filter.type && f.id !== filter.id) {
        f.active = false
      }
    })
  }
}

// 清除筛选条件
const clearFilters = () => {
  searchText.value = ''
  quickFilters.value.forEach(filter => {
    filter.active = false
  })
}

// 查看房源详情
const viewPropertyDetail = async (property: Property) => {
  const toast = await toastController.create({
    message: `查看房源详情: ${property.title}`,
    duration: 2000,
    color: 'primary',
    position: 'top'
  })
  await toast.present()
}
</script>

<style scoped>
.search-section {
  padding: 16px;
  background: white;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.filter-section {
  padding: 12px 16px;
  background: white;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  gap: 8px;
  overflow-x: auto;
  white-space: nowrap;
}

.filter-section::-webkit-scrollbar {
  display: none;
}

.properties-section {
  padding: 16px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.section-header h3 {
  margin: 0;
  color: var(--ion-color-dark);
  font-weight: 600;
  font-size: 18px;
}

.properties-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.property-card {
  margin: 0;
  cursor: pointer;
  transition: transform 0.2s ease;
  display: flex;
  overflow: hidden;
}

.property-card:hover {
  transform: translateY(-2px);
}

.property-image {
  width: 100px;
  height: 100px;
  background: rgba(79, 172, 254, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.property-image ion-icon {
  color: var(--ion-color-primary);
  font-size: 32px;
}

.property-info {
  flex: 1;
  padding: 0;
}

.property-info h4 {
  margin: 0 0 8px 0;
  color: var(--ion-color-dark);
  font-size: 16px;
  font-weight: 600;
}

.address {
  margin: 0 0 8px 0;
  color: var(--ion-color-medium);
  font-size: 14px;
}

.property-details {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.property-details span {
  font-size: 12px;
  color: var(--ion-color-medium);
  background: rgba(0, 0, 0, 0.04);
  padding: 4px 8px;
  border-radius: 8px;
}

.property-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price {
  font-size: 18px;
  font-weight: bold;
  color: var(--ion-color-danger);
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--ion-color-medium);
}

.empty-state ion-icon {
  margin-bottom: 16px;
}

.empty-state p {
  margin: 0 0 16px 0;
  font-size: 16px;
}
</style>
